﻿@{
    ViewBag.Title = "Add Tabs (with client-side constructed HTML) and Remove Tabs with Parent/Child tabstrips";
}

<h2>Add Tabs (with client-side constructed HTML) and Remove Tabs with Parent/Child tabstrips</h2>

<h3>Sample</h3>

@{
    Html.Telerik().TabStrip()
        .Name("SampleTabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Tab 1")
                .Selected(true)
                .Content(
                    @<text>
                        @Html.Partial("TabStripContent", new Tuple<string, string>("Tab 1", "SampleTabStrip1"))
                    </text>
                );
            tabstrip.Add()
                .Text("Tab 2")
                .Content(
                    @<text>
                        @Html.Partial("TabStripContent", new Tuple<string, string>("Tab 2", "SampleTabStrip2"))
                    </text>
                );
        })
        .Render();
}

<br />

<div style="height:100px; width:100%;">
    <fieldset style="width:400px; float:left; margin-right:10px;"><legend>Load Tab</legend>
        <br />
        New Tab Name: @Html.TextBox("newTabName")
        <button onclick="loadTab()">Load</button>
    </fieldset>

    <fieldset style="width:400px; float:left;"><legend>Remove Tab by Text</legend>
        <br />
        Tab to Remove: <select id="tabList"><option value="Tab 1">Tab 1</option><option value="Tab 2">Tab 2</option></select>
        <button onclick="removeTabByText()">Remove</button>
    </fieldset>

    <fieldset style="width:400px; float:left;"><legend>Remove Tab by Index</legend>
        <br />
        Tab to Remove: <select id="tabListByIndex"><option value="0">Tab 1</option><option value="1">Tab 2</option></select>
        <button onclick="removeTabByIndex()">Remove</button>
    </fieldset>
</div>

<script type="text/javascript">
    closeTab = function (idx) {
        $('#SampleTabStrip').data('tTabStrip').removeTab({ index: idx });
    }

    loadTab = function () {
        var index = $("#SampleTabStrip").data("tTabStrip").getTabCount() + 1;
        var tabName = $('#newTabName').val();

        if (tabName.length > 0) {
            var tabStrip = $('#SampleTabStrip').data('tTabStrip');
            tabStrip.addTab({ 
                text: tabName, 
                url: "@Url.Content("~")TabStrip/GetTabStripContent", 
                data: { tabName: tabName, index: index },
                complete: function() {
                    tabStrip.selectTab({ text: tabName });
                    $('#tabList').append($('<option></option>').val(tabName).html(tabName));
                }
            });
        }
        else {
            alert('Enter the text for the new tab');
        }
    }
    removeTabByText = function () {
        var tabName = $('#tabList option:selected').val();
        var tabStrip = $('#SampleTabStrip').data('tTabStrip');
        tabStrip.removeTab({ text: tabName });
        if (tabStrip.getTab({ text: tabName }).length == 0) {
            $('#tabList option:selected').remove();
        }
    }

    removeTabByIndex = function () {
        var tabIndex = $('#tabListByIndex option:selected').val();
        var tabStrip = $('#SampleTabStrip').data('tTabStrip');
        tabStrip.removeTab({ index: tabIndex });
        if (tabStrip.getTab({ index: tabIndex }).length == 0) {
            $('#tabListByIndex option:selected').remove();
        }
    }
</script>
